import { useContext, useEffect, useState } from 'react';
import { useTranslation } from 'react-i18next';
import { useMediaPredicate } from 'react-media-hook';
import { useDispatch, useSelector } from 'react-redux';
import { RootState } from 'src/redux/store'
import BackButton from 'src/component/BackButton';
import Button from 'src/component/Button';
import { MediaQuery } from 'src/constant/Media';
import { ThemeContext } from 'src/context/ThemeContext';
// import { Contact } from 'src/model/Contact';
import { openSnackbar } from 'src/redux/uiSlice';
// import { deleteContact, getContactList } from 'src/service/propertyService';
import { getMyAddress, delMyAddress } from 'src/service/moneyService';
import style from './AddressManagement.module.scss';
import AddWithdrawalAddressModal from './component/AddWithdrawalAddressModal';
import Card from './component/Card';
import Table from './component/Table';

type Contact = any

const AddressManagement = () => {
    const { t } = useTranslation();
    const dispatch = useDispatch();
    const { IcAdd, IcEmpty } = useContext(ThemeContext).image;
    const [isAddAddressModalOpen, setAddAddressModalOpen] = useState<boolean>(false);
    const isBiggerThanMd = useMediaPredicate(MediaQuery.Md);
    const [contactList, setContactList] = useState<Contact[]>([]);
    const [refresh, setRefresh] = useState<boolean>(false);
    const token = localStorage.getItem("token")
    const { accountInfo } = useSelector((rootState: RootState) => rootState.auth);
    useEffect(() => {
        if (!accountInfo?.FID) return
        getMyAddress({
            uMail: accountInfo?.FMail,
            FUserID: accountInfo?.FID,
            token: token
        }).then(res => {
            if (res.success) {
                setContactList(res.list)
            }
        })
        // getContactList()
        //   .then((res) => setContactList(res))
        //   .catch((e) => dispatch(openSnackbar({ message: e, severity: 'alert' })));
    }, [refresh, accountInfo?.FID]);

    const onAddressDelete = (id: string) => {
        delMyAddress({
            FID: id,
            token: token
        }).then(res => {
            if (res.success) setRefresh(!refresh)
        })
        // deleteContact(id)
        //   .then(() => setRefresh(!refresh))
        //   .catch((e) => dispatch(openSnackbar({ message: e, severity: 'alert' })));
    };

    if (!contactList) return <div />;

    return (
        <div>
            <BackButton />
            <div className={style.headingBlock}>
                <div className={style.heading}>地址管理</div>
                <Button
                    appearance="text"
                    className={style.recordButton}
                    onClick={() => setAddAddressModalOpen(true)}
                >
                    <img src={IcAdd} />
                    新增提领地址
                </Button>
            </div>
            <div className={style.content}>
                {contactList.length === 0 && (
                    <div className={style.emptyImg}>
                        <img src={IcEmpty} />
                    </div>
                )}
                {contactList.length > 0 &&
                    (isBiggerThanMd ? (
                        <Table contactList={contactList} onDelete={onAddressDelete} />
                    ) : (
                        <Card contactList={contactList} onDelete={onAddressDelete} />
                    ))}
            </div>
            <AddWithdrawalAddressModal
                open={isAddAddressModalOpen}
                handleClose={() => setAddAddressModalOpen(false)}
                onFinish={() => setRefresh(!refresh)}
            />
        </div>
    );
};

export default AddressManagement;
